<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询书籍信息</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .book-details {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: none;
        }
        .book-cover {
            max-width: 200px;
            margin: 0 auto 15px;
            display: block;
        }
        .info-box {
            background-color: #e7f3fe;
            border-left: 6px solid #2196F3;
            margin-bottom: 15px;
            padding: 10px;
        }
        .error-box {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
            display: none;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .edit-link {
            display: inline-block;
            margin-top: 15px;
            text-decoration: none;
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        .edit-link:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>校园二手书店 - 查询书籍信息</h1>
        
        <div class="info-box">
            <p>此页面用于查询书籍详细信息。请输入JWT Token和书籍ID进行查询。</p>
        </div>
        
        <form id="getBookForm">
            <div class="form-group">
                <label for="token">JWT Token (必填):</label>
                <input type="text" id="token" name="token" placeholder="Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..." required>
            </div>
            
            <div class="form-group">
                <label for="book_id">书籍ID (必填):</label>
                <input type="number" id="book_id" name="book_id" placeholder="要查询的书籍ID" required>
            </div>
            
            <button type="submit">查询书籍</button>
        </form>
        
        <div id="error" class="error-box"></div>
        
        <div id="bookDetails" class="book-details">
            <h2 id="bookTitle"></h2>
            
            <img id="bookCover" class="book-cover" alt="书籍封面">
            
            <table>
                <tr>
                    <th>字段</th>
                    <th>值</th>
                </tr>
                <tr>
                    <td>书籍ID</td>
                    <td id="detailId"></td>
                </tr>
                <tr>
                    <td>作者</td>
                    <td id="detailAuthor"></td>
                </tr>
                <tr>
                    <td>分类</td>
                    <td id="detailCategory"></td>
                </tr>
                <tr>
                    <td>价格</td>
                    <td id="detailPrice"></td>
                </tr>
                <tr>
                    <td>新旧程度</td>
                    <td id="detailNewDegree"></td>
                </tr>
                <tr>
                    <td>品相</td>
                    <td id="detailCondition"></td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td id="detailDescription"></td>
                </tr>
                <tr>
                    <td>卖家ID</td>
                    <td id="detailSellerId"></td>
                </tr>
                <tr>
                    <td>卖家名称</td>
                    <td id="detailSellerName"></td>
                </tr>
                <tr>
                    <td>院系</td>
                    <td id="detailDepartment"></td>
                </tr>
                <tr>
                    <td>浏览次数</td>
                    <td id="detailViews"></td>
                </tr>
                <tr>
                    <td>创建时间</td>
                    <td id="detailCreatedAt"></td>
                </tr>
                <tr>
                    <td>更新时间</td>
                    <td id="detailUpdatedAt"></td>
                </tr>
            </table>
            
            <a id="editLink" class="edit-link">编辑此书籍</a>
        </div>
    </div>
    
    <script>
        document.getElementById('getBookForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 获取JWT Token和书籍ID
            const token = document.getElementById('token').value.trim();
            const bookId = document.getElementById('book_id').value.trim();
            
            if (!token) {
                showError('JWT Token不能为空');
                return;
            }
            
            if (!bookId) {
                showError('书籍ID不能为空');
                return;
            }
            
            try {
                // 发送请求获取书籍详情
                const response = await fetch(`http://localhost:8080/api/user/book/${bookId}`, {
                    method: 'GET',
                    headers: {
                        'Authorization': token
                    }
                });
                
                const result = await response.json();
                console.log('返回结果:', result);
                
                if (result.code === 200 && result.data) {
                    // 隐藏错误信息
                    document.getElementById('error').style.display = 'none';
                    
                    // 显示书籍详情
                    const book = result.data;
                    document.getElementById('bookTitle').textContent = book.title;
                    document.getElementById('detailId').textContent = book.id;
                    document.getElementById('detailAuthor').textContent = book.author || '暂无';
                    document.getElementById('detailCategory').textContent = book.category || '暂无';
                    document.getElementById('detailPrice').textContent = book.price ? `¥${book.price}` : '暂无';
                    document.getElementById('detailNewDegree').textContent = book.newDegree || '暂无';
                    document.getElementById('detailCondition').textContent = getConditionText(book.bookCondition) || '暂无';
                    document.getElementById('detailDescription').textContent = book.description || '暂无';
                    document.getElementById('detailSellerId').textContent = book.sellerId || '暂无';
                    document.getElementById('detailSellerName').textContent = book.sellerName || '暂无';
                    document.getElementById('detailDepartment').textContent = book.department || '暂无';
                    document.getElementById('detailViews').textContent = book.views || '0';
                    document.getElementById('detailCreatedAt').textContent = formatDateTime(book.createdAt) || '暂无';
                    document.getElementById('detailUpdatedAt').textContent = formatDateTime(book.updatedAt) || '暂无';
                    
                    // 如果有封面图片，则获取并显示
                    if (book.cover === "true") {
                        fetchBookCover(bookId, token);
                    } else {
                        document.getElementById('bookCover').style.display = 'none';
                    }
                    
                    // 设置编辑链接
                    const editLink = document.getElementById('editLink');
                    editLink.href = `test_edit_book.html?id=${bookId}&token=${encodeURIComponent(token)}`;
                    
                    // 显示书籍详情区域
                    document.getElementById('bookDetails').style.display = 'block';
                } else {
                    showError(result.message || '获取书籍信息失败');
                }
            } catch (error) {
                showError('请求出错: ' + error.message);
            }
        });
        
        // 获取书籍封面
        async function fetchBookCover(bookId, token) {
            try {
                const response = await fetch(`http://localhost:8080/api/user/book/cover/${bookId}`, {
                    method: 'GET',
                    headers: {
                        'Authorization': token
                    }
                });
                
                const result = await response.json();
                
                if (result.code === 200 && result.data) {
                    const coverData = result.data;
                    
                    // 直接使用相对路径
                    if (coverData.cover && coverData.cover.startsWith('images/')) {
                        document.getElementById('bookCover').src = `http://localhost:8080/${coverData.cover}`;
                        document.getElementById('bookCover').style.display = 'block';
                    }
                    // 兼容Base64格式
                    else if (coverData.cover) {
                        document.getElementById('bookCover').src = `data:${coverData.cover_type};base64,${coverData.cover}`;
                        document.getElementById('bookCover').style.display = 'block';
                    } else {
                        document.getElementById('bookCover').style.display = 'none';
                    }
                } else {
                    document.getElementById('bookCover').style.display = 'none';
                }
            } catch (error) {
                console.error('获取书籍封面失败:', error);
                document.getElementById('bookCover').style.display = 'none';
            }
        }
        
        // 格式化书籍品相文本
        function getConditionText(condition) {
            if (!condition) return '未知';
            
            switch (condition.toLowerCase()) {
                case 'new': return '全新';
                case 'good': return '良好';
                case 'used': return '已使用';
                default: return condition;
            }
        }
        
        // 格式化日期时间
        function formatDateTime(dateTimeStr) {
            if (!dateTimeStr) return '';
            
            try {
                const date = new Date(dateTimeStr);
                return date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false
                });
            } catch (e) {
                return dateTimeStr;
            }
        }
        
        // 显示错误信息
        function showError(message) {
            const errorDiv = document.getElementById('error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            document.getElementById('bookDetails').style.display = 'none';
        }
        
        // 检查URL参数，自动填充表单
        window.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const id = urlParams.get('id');
            const token = urlParams.get('token');
            
            if (id) {
                document.getElementById('book_id').value = id;
            }
            
            if (token) {
                document.getElementById('token').value = token;
            }
            
            // 如果有ID和token参数，自动提交表单
            if (id && token) {
                document.getElementById('getBookForm').dispatchEvent(new Event('submit'));
            }
        });
    </script>
</body>
</html> 